<template>
	<!-- 头像昵称  -->
	<Top-Page>
		<cu-custom bgColor="bg-gradual-white-3" :isBack="true">
			<template #content>头像和昵称</template>
			<template #right>
				<view class="nav-bar__right-text" @click.stop="save">确定</view>
			</template>
		</cu-custom>

		<view class="hint">
			<text class="cuIcon-infofill"></text>
			可设置3套头像及昵称供好友选择
		</view>

		<view class="avatar-wrap">
			<view class="avatar-item" @click.stop="changeAvatarNum(1)">
				<avatar
					:id="''"
					:class="[['avatar', 'avatar1'].includes(avatarNumStr) ? 'avatar-content__activity' : 'avatar-content']"
					selWidth="240px"
					selHeight="480rpx"
					@upload="uploadAvatar"
					:avatarSrc="userInfo.avatar"
				></avatar>

				<input
					class="realname"
					type="text"
					v-model="userInfo.realname"
					placeholder="请输入昵称"
				/>
			</view>

			<view class="avatar-item" @click.stop="changeAvatarNum(2)">
				<avatar
					:id="1"
					:class="[avatarNumStr === 'avatar2' ? 'avatar-content__activity' : 'avatar-content']"
					selWidth="240px"
					selHeight="480rpx"
					@upload="uploadAvatar"
					:avatarSrc="userInfo.avatar2"
				></avatar>

				<input
					class="realname"
					type="text"
					v-model="userInfo.realname2"
					placeholder="请输入昵称"
				/>
			</view>

			<view class="avatar-item" @click.stop="changeAvatarNum(3)">
				<avatar
					:id="2"
					:class="[avatarNumStr === 'avatar3' ? 'avatar-content__activity' : 'avatar-content']"
					selWidth="240px"
					selHeight="480rpx"
					v-if="userInfo.avatar2"
					@upload="uploadAvatar"
					:avatarSrc="userInfo.avatar3"
				></avatar>

				<input
					class="realname"
					type="text"
					v-model="userInfo.realname3"
					placeholder="请输入昵称"
				/>
			</view>
		</view>
	</Top-Page>
</template>

<script>
	import avatar from "@/components/yq-avatar/yq-avatar.vue";

	import { saveInfo } from "@/hooks/useSaveChanges";

	import { mixins } from "./mixin/index";
	import pinia from "@/store/index";
	import { useloginStore } from "@/store/login";
	const loginStore = useloginStore(pinia);
	export default {
		mixins: [mixins],

		data() {
			return {
				saveInfo,
				avatarNumStr: "avatar", //第一或第二或第三个头像
				userInfoNum: 1, //第一或第二或第三个头像
			};
		},
		components: {
			avatar,
		},
		methods: {
			async save() {
				const res = await this.saveInfo({
					realname: this.userInfo.realname,
					realname2: this.userInfo.realname2,
					realname3: this.userInfo.realname3,
				});

				// 如果保存成功，则更新全局数据
				if (res && res.success) {
					const app = getApp();
					app.globalData.modifyData = {
						type: "avatar-nickname",
					};

					uni.navigateBack();
				}
			},
			changeAvatarNum(num) {
				this.avatarNumStr = `avatar${num}`;
				this.userInfoNum = num;
			},
			uploadAvatar(res) {
				uni.showLoading({
					title: "上传中...",
				});
				uni.uploadFile({
					url: this.$api.msgApi.uploadAvatar,
					filePath: res.path,
					name: "file",
					header: {
						Authorization: uni.getStorageSync("authToken"),
					},
					formData: {
						ext: "png",
						num: this.userInfoNum,
					},
					success: (e) => {
						uni.hideLoading();
						let res = JSON.parse(e.data);
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
							if (this.userInfoNum < 2) {
								this.userInfo[`avatar`] = res.data;
							} else {
								this.userInfo[`avatar${this.userInfoNum}`] = res.data;
							}
							let data = JSON.parse(JSON.stringify(this.userInfo));
							loginStore.login(data);
						}
					},
					fail: (res) => {
						uni.hideLoading();
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.nav-bar__right-text {
		margin-right: 24rpx;
		padding: 0 24rpx;
		height: calc(var(--amplified_base) * 56rpx);
		background: #1a66ff;
		border-radius: 8rpx;
		font-weight: 400;
		font-size: calc(var(--amplified_base) * 28rpx);
		color: #ffffff;
		line-height: calc(var(--amplified_base) * 54rpx);
		text-align: center;
	}
	.hint {
		color: #999;
		padding: 20rpx 30rpx;
	}

	.avatar-wrap {
		width: 700rpx;
		margin-left: 25rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.avatar-item {
			background-color: #fff;
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 80rpx;
			border-radius: 20rpx;

			:deep(.my-avatar) {
				border-radius: 20rpx;
			}
		}

		.realname {
			text-align: center;
			margin-top: 12rpx;
		}
	}
</style>
